<template>
	<view class="textInfo">
		<text class="txt">{{TripInfoData?.order_name}} {{dayAndNight}} - 行程计划</text>
		<view class="persons-Time">
			<text>{{ getPersonsInfo }}</text>
			<text> · </text>
			<text>{{formattedStartDate}} - {{formattedEndDate}}</text>
		</view>
		<view class="footer-prices">
			<view class="prices">
				<text v-if="TripInfoData.order_price == null">￥？？？</text>
				<text v-else>￥{{TripInfoData?.order_price}} </text>
				<!-- 	<view class="icon" @click="openPopup">
					<text>起</text>
					<image src="@/static/eIcones/常见问题.png.png" mode=""></image>
				</view> -->
			</view>
			<text>更行于{{ currentDate }}</text>
		</view>
	</view>
	<uni-popup ref="popup" type="bottom" animation="true">
		<view class="popup-content">
			<text class="title">预估价格</text>
			<text class="content">预估价格不含抵达前费用，具体价格以顾问确认后为准。</text>
			<view class="confirm" @click="closePopup">我知道了</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		defineProps,
		onMounted,
		watchEffect,
		computed,
		watch
	} from 'vue';
	const popup = ref(null);
	const emit = defineEmits();
	const currentDate = ref('');
	const formattedStartDate = ref('');
	const formattedEndDate = ref('');
	const date = ref();
	const props = defineProps({
		TripInfoData: {
			type: Object,
			default: () => {},
		},
	});




	// 获取当前日期
	const getCurrentDate = () => {
		const date = new Date();
		const month = date.getMonth() + 1; // 月份是从0开始的，需要加1
		const day = date.getDate();
		return `${month}月${day < 10 ? '0' + day : day}日`;
	};

	// 在组件加载时执行
	onMounted(() => {
		// 获取当前日期
		currentDate.value = getCurrentDate();
	});

	// 格式化日期的函数
	const formatDate = (date) => {
		// 如果 date 是无效的 Date 对象或为空，则返回空字符串
		if (!(date instanceof Date) || isNaN(date)) {
			return '';
		}

		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0'); // 确保月份是两位数
		const day = String(date.getDate()).padStart(2, '0'); // 确保日期是两位数

		return `${year}年${month}月${day}日`;
	};

	// 使用 watch 监听并处理日期逻辑
	watch(() => props.TripInfoData, (newVal) => {
		if (newVal && newVal.arrival_time) {
			// 确保 arrival_time 是字符串
			let arrivalTime = String(newVal.arrival_time).trim();

			// 预处理日期字符串，转换为ISO 8601格式
			const parts = arrivalTime.split('-');
			if (parts.length === 4) { // 确认是"YYYY-MM-DD-HH:mm"格式
				arrivalTime = `${parts[0]}-${parts[1]}-${parts[2]}T${parts[3]}`;
			}

			date.value = arrivalTime;
			formattedStartDate.value = formatDate(new Date(arrivalTime));

			// 检查 arrangement_info 是否为数组
			const daysCount = Array.isArray(newVal.arrangement_info) ? newVal.arrangement_info.length : 0;

			// 更严格的日期有效性检查
			const parsedDate = new Date(arrivalTime);
			if (arrivalTime && !isNaN(parsedDate)) {
				const endDate = new Date(parsedDate);

				// 计算结束日期
				endDate.setDate(endDate.getDate() + daysCount - 1); // 根据trip_dayorhotel的长度计算结束日期

				// 格式化结束日期
				formattedEndDate.value = formatDate(endDate);
			} else {
				formattedEndDate.value = '';
			}
		}
	}, {
		immediate: true
	});
	// 计算人员信息
	const getPersonsInfo = computed(() => {
		const tripNum = props.TripInfoData?.person_info || {};
		let personsInfo = [];
		if (tripNum.adult > 0) {
			personsInfo.push(`${tripNum.adult}成人`);
		}
		if (tripNum.bin_kid > 0) {
			personsInfo.push(`${tripNum.bin_kid}大童`);
		}
		if (tripNum.foreigner > 0) {
			personsInfo.push(`${tripNum.foreigner}外籍人`);
		}
		if (tripNum.hmt_person > 0) {
			personsInfo.push(`${tripNum.hmt_person}港澳台人`);
		}
		if (tripNum.middle_kid > 0) {
			personsInfo.push(`${tripNum.middle_kid}中童`);
		}
		if (tripNum.old_man > 0) {
			personsInfo.push(`${tripNum.old_man}老人`);
		}
		if (tripNum.small_kid > 0) {
			personsInfo.push(`${tripNum.small_kid}幼童`);
		}

		return personsInfo.join('  ·  ');
	});
	//结算几天几夜
	const dayAndNight = computed(() => {
		const daysCount = props.TripInfoData?.arrangement_info?.length || 0;
		return `${daysCount}天${daysCount - 1}晚`;
	});
	// 打开popup
	const openPopup = () => {
		emit('openPopup');
		popup.value.open('center');
	};

	// 关闭popup
	const closePopup = () => {
		emit('closePopup');
		popup.value.close();
	};
</script>


<style lang="scss" scoped>
	.textInfo {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.txt {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.persons-Time {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-top: 20rpx;
			margin-bottom: 30rpx;

			text {
				font-size: 24rpx;
			}
		}

		.footer-prices {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.prices {
				display: flex;
				align-items: baseline;
				gap: 4rpx;

				text {
					font-size: 32rpx;
					color: #ac2a26;
					font-weight: 600;
				}

				.icon {
					display: flex;
					align-items: center;
					gap: 4rpx;

					text {
						font-size: 20rpx;
						color: #999999;
					}

					image {
						width: 23rpx;
						height: 23rpx;
					}
				}
			}

			text {
				font-size: 26rpx;
				color: #999999;
			}
		}
	}

	.popup-content {
		width: 80vw;
		border-radius: 30rpx;
		background-color: #fff;
		animation: slideUp 0.3s ease-out;

		text {
			display: block;
			text-align: center;
			padding: 50rpx 30rpx 0 30rpx;
			box-sizing: border-box;
		}

		.title {
			width: 100%;
			margin-bottom: 20rpx;
		}

		.content {
			width: 100%;
			font-size: 28rpx;
			color: #999999;
			padding: 0rpx 30rpx 40rpx 30rpx;
		}

		.confirm {
			width: 100%;
			height: 120rpx;
			border-top: 2rpx solid #f5f6f7;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}
</style>